<template>
  <div class="Order">
    <div class="Order-header">
      <div class="Order-logo" style="width: 120px;">
      <img src="@/assets/logo.png" alt="" style="width: 80px; margin-left: 100px; margin-top: 10px;">
     <br>
     <!-- <span>赣选</span> -->
      </div>
      <div class="Order-search">
        <el-input  placeholder="赣南脐橙"  style="width: 400px; border: 3px solid #66cdaa; border-radius: 7px; margin-left: 100px;"> </el-input>
        <el-button  style="background-color: #66cdaa; color: white; ">搜索</el-button>
        
      </div>
      <div class="Order-shopping" style="">
        <img src="@/assets/shopping.png" alt="" style="width: 20px; ">
      <span style="font-size: 15px;">我的购物车
      </span>
      <span>&gt;</span>
        </div>
    </div>
    <div class="Order-banner">
      <div class="Order-caidan"> 
         <span style="margin-left: 10px; "><router-link to="/Order">全部订单</router-link></span>
        <span style=" margin-left: 10px;"><router-link to="/Weifukuan">待付款</router-link></span>
        <span style=" margin-left: 10px;"><router-link to="/DaiShouhuo">待收货/待使用</router-link></span>
        <span style=" margin-left: 10px;">待评价</span>
        <span style="margin-left: 600px;">
          <el-input  placeholder="商品名称/商品编号/订单号" size="normal" style="width: 200px;border:3px solid #66cdaa; border-radius: 7px; "></el-input>
          <el-button  style="background-color: #66cdaa; color: white;">搜索</el-button>
        </span></div>
        <div class="Order-biaotou" style="height: 25px;">
          <span  style="margin-left: 350px;">商品详情</span>
          <span style="margin-left: 310px;">收货地址</span>
          <span style="margin-left: 100px;">金额</span>
          <span style="margin-left: 70px;">状态</span>
          <span style="margin-left: 90px;">操作</span>
        </div>
      
      </div>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
name:'MyOrder'
}
</script>

<style>
.Order{
  text-align: center;
  margin: 0 auto;
  width: 1200px;

  /* background-color: slateblue; */
}
.Order-header{
  display: flex;
  width: 1200px;
  height: 100px;
  background-color: white;
 

 
}
 /* .Order-header div{  */
    /* display: inline-block; */
 /* }  */
 .Order-search{
line-height: 100px;

 }
 .Order-shopping{
  margin-top: 30px;
  margin-left: 300px;
  line-height: 38px;
  background-color: white;
  width: 140px; 
  height: 30px; 
  border: 3px solid #66cdaa;
  border-radius: 5px;
 }
 .Order-banner{
 
  margin-top: 40px;
width: 1200px;
background-color: white;


 }
 .Order-caidan{
  background-color: white;
  width: 1200px;
  height: 40px;
  display: flex;
 }
 .Order-caidan span :hover{
  border-bottom: 2px solid #66cdaa;
 }
 .Order-biaotou{
  display: flex;
 }
</style>